<template>
    <box left="1336px"
         top="415px"
         width="526px"
         height="542px"
         title="用户原声">
        <div class="wrap">
            <vue-seamless-scroll :data="info" :class-option="defaultOption">
            <div class="item"
                 v-for="(item,index) in info"
                 :key="`item-${index}`">
                <div class="title flex">
                    <div class="channel item flex">
                        <img src="../../../assets/img/dialog/icon-1.png" />渠道:{{item.channel}}
                    </div>
                    <div class="industry item">
                        <img src="../../../assets/img/dialog/icon-2.png" />产业:{{item.industry}}
                    </div>
                    <div class="position item">
                        <img src="../../../assets/img/dialog/icon-3.png" />责任位:{{item.position}}
                    </div>
                </div>
                <div class="cont">
                    <p>
                        {{item.content}}
                    </p>
                </div>
            </div>
            </vue-seamless-scroll>
        </div>
    </box>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
    //注册组件
components: {
    vueSeamlessScroll
  },
    props: {
        info: {},
    },
    data() {
        return {}
    },
    computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
 
        },
    methods: {},
    created() {},
    mounted() {},
}
</script>
<style lang='less' scoped>
.wrap {
    padding: 12px;
    height: 460px;
    overflow-y: scroll;
    .item {
        width: 500px;
        height: 115px;
        .title {
            width: 100%;
            height: 30px;
            background: rgba(51, 170, 255, 0.1);
            font-size: 14px;
            color: #8fadcc;
            line-height: 30px;
            .item {
                padding-left: 30px;
                img {
                    margin-right: 8px;
                }
            }
            .channel {
                width: 170px;
                height: 30px;
            }
            .industry {
                width: 170px;
                height: 30px;
            }
            .position {
                width: 160px;
                height: 30px;
            }
        }
        .cont {
            width: 100%;
            height: 95px;
            padding: 10px;
            p {
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>